<template>
  <div class="gywm">
    <div class="jrBanner">
      <div class="title">组件</div>

      <div class="two">
        <template>
            <div class="com">
                <el-collapse v-model="activeName" accordion>
                    <el-collapse-item
                    class="titless"
                    :title="item.title"
                    :name="index"
                    v-for="(item, index) in data"
                    :key="index"
                    >
                    <div class="roules">
                        {{ item.roule }}
                    </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <div class="com">
                <Ymtable
                    v-loading="loading"
                    :selection="true"
                    :filter-obj="filterObj"
                    :table-head-config="tableHeadConfig"
                    :table-load-data="tableLoadData"

                    @toexamine="toexamine"
                    @companyInfo ="companyInfo"
                    @handleDelete ="handleDelete"
                >
                </Ymtable>
                <!-- 
                    参数说明：
                    :filter-obj="filterObj"的作用：
                        向ETable组件传入filterObj值，filterObj：表头多选框筛选的可选项值（当表头多选框筛选里的可选项来自表格数据时传入）
                    :table-head-config="tableHeadConfig"的作用：
                        向ETable组件传入tableHeadConfig值，tableHeadConfig：表头数据值
                    :table-load-data="tableLoadData"的作用：
                        向ETable组件传入tableLoadData值，tableLoadData：表格数据值
                    :click-style="true"的作用：
                        向ETable组件传入clickStyle值,clickStyle:true或false，表示行是否可点击（鼠标移动到行是否出现小手样式）
                    :selection="true"的作用：
                        向ETable组件传入selection值,selection:true或false，表示是否存在多选框
                    @selectData="selectData"的作用：
                        多选框选中行改变触发页面selectData事件，使页面拿到ETable组件里多选框选中行值
                    @filterData="filterData"的作用：
                        表头多选框筛选项改变触发页面filterData事件，使页面拿到ETable组件里表头多选框筛选的值
                    @inputData="inputData"的作用：
                        表头输入框筛选项改变触发页面inputData事件，使页面拿到ETable组件里表头输入框筛选的值
                    @timeData="timeData"的作用：
                        表头日期范围筛选项改变触发页面timeData事件，使页面拿到ETable组件里表头日期范围筛选的值
                    @numData="numData"的作用：
                        表头计数范围筛选项改变触发页面numData事件，使页面拿到ETable组件里表头计数范围筛选的值
                    @rowClick="rowClick"的作用：
                        行点击触发页面rowClick事件，使页面拿到ETable组件里点击行值
                    @sortData="sortData"的作用：
                        排序条件改变触发页面sortData事件，使页面拿到ETable组件里排序条件值
                 -->
            </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "gywm",
  data() {
    return {
        loading: false,
        filterObj: [{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}],//表头多选框筛选的可选项值
        tableHeadConfig: [
            {
                state: '可筛选',//是否可筛选
                sortable: true,//是否可排序
                align: '',//是否居中
                width: '100',//宽
                nameZh: '时间',//表列名字
                property: 'time',//表列数据名字
            },{
                state: '普通',
                sortable: false,
                align: '',
                width: '100',
                nameZh: '姓名',
                property: 'name',
            },{
                state: 'router',
                sortable: false,
                align: '',
                width: '100',
                nameZh: '地址',
                property: 'address',
            },{
                state: 'find',
                sortable: false,
                align: '',
                width: '100',
                nameZh: '审核状态',
                property: 'companyProperty',
                //企业性质
                selectProperty: [
                    {
                    value: '12',
                    label: '学校'
                    }, {
                    value: '1',
                    label: '行政机关'
                    }, {
                    value: '2',
                    label: '社会团体'
                    }
                ],
            },{
                state: 'btn',
                sortable: false,
                align: '',
                width: '180',
                nameZh: '地址',
                property: 'companyProperty',
            }
        ],//表头数据
        tableLoadData: [
            {
                time: "2016-05-02",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1518 弄",
                companyProperty: '12',
            },
            {
                time: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1517 弄",
                companyProperty: '1',
            }
        ],//表格数据
        






        activeName: 0,
        data: [
            {
            title: "封装table",
            roule:
                "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
            },
            {
            title: "Consistency",
            roule:
                "与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；",
            }
        ],


    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
      toexamine(row){
          console.log(row,'222222222222222222');
      },
      companyInfo(row){
          console.log(row,'>>3333333333');
      },
      handleDelete(row){
          console.log(row,'>>44444444444');
      },
  },
};
</script>

<style scoped>
.gywm {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jrBanner {
  width: 24rem;
  background: #f6f6f6;
}
.title {
  height: 2rem;
  background: #aabbcc;
  text-align: center;
  line-height: 2rem;
  font-size: 1rem;
}

.two {
  max-width: 80%;
  background: #f9f9f9;
  /* display: flex; */
  margin: 0 auto;
}
.com{
    margin: 10px;
}
.el-collapse-item__header {
  color: seagreen !important;
  padding-top: 0px;
  text-align: left;
  padding-left: 10px;
}
.roules {
  color: sandybrown;
  padding-left: 15px;
}
</style>
